Skip to content

feat: support allowClear tabIndex - #207

Merged
zombieJ merged 3 commits into
react-component:masterfrom
QDyanbing:feat-allow-clear-tab-index
Oct 12, 2026
Merged

zombieJ merged 3 commits into
react-component:masterfrom
QDyanbing:feat-allow-clear-tab-index

Conversation

@QDyanbing

@QDyanbing QDyanbing commented Oct 12, 2026 •

Copy link
Copy Markdown
Contributor

开启 allowClear 后,Tab 会聚焦清除按钮,多输入框表单目前无法单独配置是否跳过该按钮。根据 ant-design/ant-design#59540 (comment) 的建议,为 Input 和 TextArea 的 allowClear 增加可选的 tabIndex,通过共享的 BaseInput 传递给清除按钮。

配置 allowClear={{ tabIndex: -1 }} 后,Tab 和 Shift+Tab 会跳过清除按钮,鼠标仍可点击清除;未配置时保留默认键盘访问行为。同步更新 API 文档,并覆盖默认键盘清除、双向 Tab 导航、鼠标清除、动态配置和输入框自身 tabIndex 独立性的测试。

验证:

  • 单元测试:11 个测试套件、137 项测试、22 个快照通过。
  • TypeScript 类型检查通过。
  • ESLint 无错误;已有 2 条 Hook 依赖警告,现有测试有 React act 警告。
  • 提交钩子的 Prettier 检查通过。

Summary by CodeRabbit

  • 新功能
    • Input 和 TextArea 的清除按钮支持单独设置键盘导航顺序;设为 -1 时,按钮仍可点击清除,但不会被 Tab 键选中。
  • 无障碍改进
    • 清除按钮的键盘导航顺序可独立于输入框配置,并会在配置更新后生效。
    • 禁用或只读状态下,以及输入框没有内容时,清除按钮不会显示。

@vercel

vercel Bot commented Oct 12, 2026

Copy link
Copy Markdown

@QDyanbing is attempting to deploy a commit to the afc163's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Oct 12, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 08051491-5c24-4afa-8fd8-45ce7fcaa717

📥 Commits

Reviewing files that changed from the base of the PR and between c573b11 and ae84cdc.


📒 Files selected for processing (3)
  • src/BaseInput.tsx
  • src/hooks/useAllowClear.ts
  • tests/allowClear.test.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.



Walkthrough

Input 和 TextArea 的 allowClear 对象配置新增可选 tabIndex。BaseInput 将该值应用于清除按钮。新增测试覆盖按钮状态、键盘导航、清除操作和重新渲染;README 补充配置说明。

Changes

清除按钮键盘导航

Layer / File(s) Summary
配置并应用清除按钮 tabIndex
src/interface.ts, src/hooks/useAllowClear.ts, src/BaseInput.tsx
allowClear 对象配置新增可选 tabIndex。useAllowClear 提供配置,BaseInput 将 tabIndex 应用于清除按钮,并根据派生状态控制按钮及后缀渲染。ValueOrTextAreaValue 的联合类型格式调整,成员未变。
验证并记录键盘行为
tests/allowClear.test.tsx, README.md
测试覆盖按钮显示、图标、tabIndex、键盘与点击清除行为,以及重新渲染。README 补充 Input 和 TextArea 的 tabIndex 配置说明。

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Suggested reviewers: zombiej

Merge Risk: ⚪ Minimal · up to ae84c

The allowClear tabIndex change is mergeable after normal checks.

Pre-merge checks | Passed 4 | Failed 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 4 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed 标题明确描述了本次变更的主要内容:为 allowClear 支持 tabIndex。
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.

  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Commit to this branch
  • Create a new PR

🧪 Generate unit tests (beta)
  • Create a new PR

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

小兔带来一枚清除键,
Tab 轻轻跳过它身边。
Enter 按下,文字消散,
鼠标点击,焦点仍安然。
新添索引,文档写清,
键盘小路更分明。

Comment @coderabbitai help to get the list of available commands.

@QDyanbing
QDyanbing marked this pull request as ready for review October 12, 2026 07:52
@codecov

codecov Bot commented Oct 12, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.36%. Comparing base (507a041) to head (ae84cdc).

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #207   +/-   ##
=======================================
  Coverage   98.36%   98.36%           
=======================================
  Files          11       12    +1     
  Lines         428      428           
  Branches      134      137    +3     
=======================================
  Hits          421      421           
  Misses          7        7           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@QDyanbing QDyanbing changed the title [codex] feat: support allowClear tabIndex feat: support allowClear tabIndex Oct 12, 2026
Comment thread src/BaseInput.tsx Outdated
Comment thread src/hooks/useAllowClear.ts Outdated
@QDyanbing
QDyanbing requested a review from zombieJ October 12, 2026 09:03
@zombieJ
zombieJ merged commit 1793726 into react-component:master Oct 12, 2026
9 of 10 checks passed
@QDyanbing
QDyanbing deleted the feat-allow-clear-tab-index branch October 12, 2026 09:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants